<template>
    <div id="all">
        <div class="p1">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">我要派单</el-menu-item>
                <el-menu-item index="3">我要接单</el-menu-item>
                <el-menu-item index="4">意见反馈</el-menu-item>
                <el-menu-item index="5">帮助</el-menu-item>
                <el-menu-item index="6">{{username}}</el-menu-item>
                <el-menu-item index="7" @click="giao"><el-avatar :src="imgpath"></el-avatar></el-menu-item>
            </el-menu>
        </div>
        <div class="p2">
             <div class="admin-sidebar">
               <el-menu :default-active="activeIndex2" class="el-menu-vertical-demo" 
                      @select="handleMenuSelect">
               <el-menu-item index="1" class="icon-container">
                <i class="el-icon-shopping-cart-full"></i>
                 <span slot="title">帮我买</span>
               </el-menu-item>
               <el-menu-item index="2" class="icon-container">
                <i class="el-icon-truck"></i>
                 <span slot="title">帮我取</span>
               </el-menu-item>
               <el-menu-item index="3" class="icon-container">
                <i class="el-icon-truck"></i>
                 <span slot="title">帮我送</span>
               </el-menu-item>
               <el-menu-item index="4" class="icon-container">
                <i class="el-icon-user"></i>
                 <span slot="title">帮我排队</span>
               </el-menu-item>
             </el-menu>
            </div>
            <div class="admin-content">
                <component :is="content"></component>
            </div>
        </div>
    </div>
</template>

<script>
//import axios from 'axios';
import BuyPage from './BuyPage.vue';
import DrawPage from './DrawPage.vue';
import SendPage from './SendPage.vue';
import QuenePage from './QuenePage.vue';
import deImg from '../assets/gg.png';
    export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2:'1',
        content:BuyPage,
        tabPosition: 'left',
        defaultImg:deImg,
        username:'',
        imgpath:''
      };
    },
    methods: {
      giao(){
        this.$router.push('/in')
      },
      handleSelect(key) {
        console.log(key)
      },
      handleMenuSelect(index){
        switch (index) {
          case "1":
            this.content =BuyPage
            break;
          case "2":
            this.content =DrawPage
            break;
          case "3":
            this.content =SendPage
            break;
          case "4":
            this.content=QuenePage
        }
      }
    },
    created() {
      const userInfoString = localStorage.getItem('useinfo')
      const userInfo = JSON.parse(userInfoString)
      this.username=userInfo.name;
      const imgdata = localStorage.getItem('imgpath')
      this.imgpath= imgdata
   }
  }

</script>

<style>
.p1{
    margin-top: -40px;
}
.p2{
    display: flex;
    flex-direction: row;
    background-image: url('../assets/waimai.jpg');
}

.admin-content{
    width: 82%;
    margin-top: 20px;
    margin-left: 150px;
}
.admin-sidebar{
    width: 18%;
}

li.el-menu-item{
    height: 150px;
    line-height: 150px;
}
.el-menu--horizontal>.el-menu-item{
    margin-left: 50px;
    position: relative;
    left: 500px;
}
.icon-container {
  margin: auto;
  width: 150px;
  border-radius: 50%;
  background-color: rgba(234, 239, 187,0.3); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2),
                0 6px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-menu-vertical-demo{
  background-color: rgba(255, 255, 255, 0);
  border-color: transparent;
}
</style>